<template>
  <view class="patient-detail-container">
    <!-- 头部信息 -->
    <view class="header-section">
      <view class="patient-avatar">
        <text class="avatar-text">{{ patientInfo.name ? patientInfo.name.charAt(0) : '?' }}</text>
      </view>
      <view class="patient-basic">
        <text class="name">{{ patientInfo.name || '加载中...' }}</text>
        <text class="details">
          {{ getGenderText(patientInfo.gender) }} | {{ patientInfo.age || '--' }}岁
        </text>
        <text class="id-card">身份证：{{ patientInfo.idCard || '--' }}</text>
      </view>
    </view>

    <!-- 基本信息卡片 -->
    <view class="info-card">
      <view class="card-title">
        <text class="title-text">基本信息</text>
      </view>
      <view class="info-content">
        <view class="info-row">
          <text class="label">联系电话：</text>
          <text class="value">{{ patientInfo.phone || '未填写' }}</text>
        </view>
        <view class="info-row">
          <text class="label">紧急联系人：</text>
          <text class="value">{{ patientInfo.emergencyContact || '未填写' }}</text>
        </view>
        <view class="info-row">
          <text class="label">紧急电话：</text>
          <text class="value">{{ patientInfo.emergencyPhone || '未填写' }}</text>
        </view>
        <view class="info-row">
          <text class="label">居住地址：</text>
          <text class="value">{{ patientInfo.address || '未填写' }}</text>
        </view>
        <view class="info-row">
          <text class="label">过敏史：</text>
          <text class="value">{{ patientInfo.allergicHistory || '无' }}</text>
        </view>
        <view class="info-row">
          <text class="label">既往病史：</text>
          <text class="value">{{ patientInfo.medicalHistory || '无' }}</text>
        </view>
      </view>
    </view>

    <!-- 健康指标卡片 -->
    <view class="info-card">
      <view class="card-title">
        <text class="title-text">健康指标</text>
        <text class="subtitle">（由医护人员填写）</text>
      </view>
      <view class="info-content">
        <view class="health-grid">
          <view class="health-item">
            <text class="health-label">身高</text>
            <text class="health-value" :class="getHealthValueClass(patientInfo.height)">
              {{ patientInfo.height || '未测量' }}
            </text>
            <text class="health-unit">cm</text>
          </view>
          <view class="health-item">
            <text class="health-label">体重</text>
            <text class="health-value" :class="getHealthValueClass(patientInfo.weight)">
              {{ patientInfo.weight || '未测量' }}
            </text>
            <text class="health-unit">kg</text>
          </view>
          <view class="health-item">
            <text class="health-label">血氧饱和度</text>
            <text class="health-value" :class="getHealthValueClass(patientInfo.bloodOxygen)">
              {{ patientInfo.bloodOxygen || '未测量' }}
            </text>
            <text class="health-unit">%</text>
          </view>
          <view class="health-item">
            <text class="health-label">视力</text>
            <text class="health-value" :class="getHealthValueClass(patientInfo.vision)">
              {{ patientInfo.vision || '未测量' }}
            </text>
          </view>
          <view class="health-item">
            <text class="health-label">血压</text>
            <text class="health-value" :class="getHealthValueClass(patientInfo.bloodPressure)">
              {{ patientInfo.bloodPressure || '未测量' }}
            </text>
            <text class="health-unit">mmHg</text>
          </view>
          <view class="health-item">
            <text class="health-label">血糖</text>
            <text class="health-value" :class="getHealthValueClass(patientInfo.bloodSugar)">
              {{ patientInfo.bloodSugar || '未测量' }}
            </text>
            <text class="health-unit">mmol/L</text>
          </view>
        </view>
        
        <view class="health-details">
          <view class="detail-row">
            <text class="label">血脂：</text>
            <text class="value" :class="getHealthValueClass(patientInfo.bloodLipid)">
              {{ patientInfo.bloodLipid || '未测量' }}
            </text>
          </view>
          <view class="detail-row">
            <text class="label">健康状况：</text>
            <text class="value" :class="getHealthValueClass(patientInfo.development)">
              {{ patientInfo.development || '未测量' }}
            </text>
          </view>
          <view class="detail-row">
            <text class="label">其他情况：</text>
            <text class="value" :class="getHealthValueClass(patientInfo.otherConditions)">
              {{ patientInfo.otherConditions || '未测量' }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 时间信息 -->
    <view class="info-card">
      <view class="card-title">
        <text class="title-text">时间信息</text>
      </view>
      <view class="info-content">
        <view class="info-row">
          <text class="label">创建时间：</text>
          <text class="value">{{ formatDateTime(patientInfo.createdAt) }}</text>
        </view>
        <view class="info-row">
          <text class="label">更新时间：</text>
          <text class="value">{{ formatDateTime(patientInfo.updatedAt) }}</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn edit" @click="editPatient">编辑基本信息</button>
      <button class="action-btn back" @click="goBack">返回</button>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-overlay">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PatientDetail',
  data() {
    return {
      loading: false,
      patientInfo: {}
    }
  },
  
  onLoad(options) {
    if (options.id) {
      this.getPatientDetail(options.id)
    }
  },
  
  methods: {
    // 获取就诊人详情
    async getPatientDetail(patientId) {
      this.loading = true
      try {
        const token = uni.getStorageSync('token')
        if (!token) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }
        
        const response = await uni.request({
          url: `http://localhost:8080/patient/${patientId}`,
          method: 'GET',
          header: {
            'Authorization': `Bearer ${token}`
          }
        })
        
        if (response.data.code === 200) {
          this.patientInfo = response.data.data || {}
        } else {
          uni.showToast({
            title: response.data.message || '获取就诊人详情失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '获取就诊人详情失败',
          icon: 'none'
        })
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    
    // 获取性别文本
    getGenderText(gender) {
      const genderMap = {
        1: '男',
        2: '女',
        3: '其他'
      }
      return genderMap[gender] || '未知'
    },
    
    // 获取健康指标值的样式类
    getHealthValueClass(value) {
      if (!value || value === '未测量') {
        return 'not-measured'
      }
      return 'measured'
    },
    
    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return '--'
      const date = new Date(dateTime)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    },
    
    // 编辑就诊人
    editPatient() {
      uni.navigateTo({
        url: `/pages/patient/edit-patient?id=${this.patientInfo.id}`
      })
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.patient-detail-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.header-section {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .patient-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30rpx;
    
    .avatar-text {
      color: white;
      font-size: 48rpx;
      font-weight: bold;
    }
  }
  
  .patient-basic {
    flex: 1;
    
    .name {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 15rpx;
    }
    
    .details {
      font-size: 28rpx;
      color: #666;
      display: block;
      margin-bottom: 10rpx;
    }
    
    .id-card {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.info-card {
  background: white;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
  .card-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 30rpx;
    color: white;
    
    .title-text {
      font-size: 32rpx;
      font-weight: bold;
      display: block;
    }
    
    .subtitle {
      font-size: 24rpx;
      opacity: 0.8;
      margin-top: 8rpx;
      display: block;
    }
  }
  
  .info-content {
    padding: 30rpx;
  }
}

.info-row {
  display: flex;
  margin-bottom: 20rpx;
  
  .label {
    font-size: 28rpx;
    color: #666;
    width: 200rpx;
    flex-shrink: 0;
  }
  
  .value {
    font-size: 28rpx;
    color: #333;
    flex: 1;
  }
}

.health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin-bottom: 30rpx;
  
  .health-item {
    background: #f8f9fa;
    border-radius: 15rpx;
    padding: 20rpx;
    text-align: center;
    
    .health-label {
      font-size: 24rpx;
      color: #666;
      display: block;
      margin-bottom: 10rpx;
    }
    
    .health-value {
      font-size: 32rpx;
      font-weight: bold;
      display: block;
      margin-bottom: 5rpx;
      
      &.measured {
        color: #34c759;
      }
      
      &.not-measured {
        color: #999;
      }
    }
    
    .health-unit {
      font-size: 20rpx;
      color: #999;
    }
  }
}

.health-details {
  .detail-row {
    display: flex;
    margin-bottom: 15rpx;
    
    .label {
      font-size: 26rpx;
      color: #666;
      width: 160rpx;
      flex-shrink: 0;
    }
    
    .value {
      font-size: 26rpx;
      color: #333;
      flex: 1;
      
      &.measured {
        color: #34c759;
        font-weight: 500;
      }
      
      &.not-measured {
        color: #999;
      }
    }
  }
}

.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx;
  display: flex;
  gap: 20rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .action-btn {
    flex: 1;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    
    &.edit {
      background: #007aff;
      color: white;
    }
    
    &.back {
      background: #f5f5f5;
      color: #666;
    }
  }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
}
</style>

